<template>
    <el-card>
        <el-form :inline="true">
            <el-form-item label="一级分类:">
                <el-select v-model="useCategory.c1Id" style="width: 240px" @change="handlerC1" :disabled="disabledSelect" >
                    <el-option v-for="item in useCategory.c1Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类:">
                <el-select  v-model="useCategory.c2Id" style="width: 240px" @change="handlerC2" :disabled="disabledSelect">
                    <el-option v-for="item in useCategory.c2Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类:">
                <el-select v-model="useCategory.c3Id" style="width: 240px" :disabled="disabledSelect">
                    <el-option v-for="item in useCategory.c3Arr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue';
import { useCategoryStore } from '@/stores/modules/category'
const useCategory = useCategoryStore()

// 是否禁用下拉菜单
const disabledSelect = computed(() => useCategory.disabledSelect === 1)

const getC1Arr = () => {
    // 获取一级导航的数据
    useCategory.getC1Arr()
}

// 一级分类的选项发生改变时
const handlerC1 = () => {
    // 先清除c2c3的相关数据
    useCategory.clearC2C3()
    // 获取二级分类数据、
    useCategory.getC2Arr()
}

// 二级分类的选项发生改变时
const handlerC2 = () => {
    // 先清除c3数据
    useCategory.clearC3()
    // 获取三级分类数据、
    useCategory.getC3Arr()
}


onMounted(() => {
    // 获取一级分类数据
    getC1Arr()
})
</script>

<style scoped></style>